<!DOCTYPE html>
<html lang="en">
<style>
ul.grindyMenu {
    background: url("../images/shadeline.jpg") no-repeat scroll center bottom transparent;
    padding-bottom: 10px;
}

ul.grindyMenu li{
	/*background:white;
	color:#D09984;
	display:inline;
	list-style:none;
	padding:1px 15px 1px 15px;*/
	
	
	 -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #F5F3F4;
    border-color: #E1E1E1 #E1E1E1 -moz-use-text-color;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    float: left;
    list-style: none outside none;
    margin: 0;
    min-width: 150px;
    padding: 5px 15px;
    text-align: center;
	
}


ul.grindyMenu li:hover, ul.grindyMenu li.selected {
    background: url("../images/linesprite.gif") repeat-x scroll 0 -137px transparent;
}

ul.grindyMenu a{
	color: #000000;
    font: 18px "Trebuchet MS",Arial,Helvetica,sans-serif;
    text-decoration: none;
}

ul.grindyMenu li.ui-state-active{
	background:#D09984;
}

ul.grindyMenu li.ui-state-active a{
	color:white;
}



</style>


<head>
	<meta charset="utf-8">
	<title>jQuery UI Tabs - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.2.js"></script>
	<!--<script src="../../ui/jquery.ui.core.js"></script>-->
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	
	</script>
</head>
<body>


<div id="mytabs" >
    <ul  class="grindyMenu">
        <li><a href="#tab-1"><span>Details Description</span></a></li>
        <li><a href="#tab-2"><span>Ltinerary</span></a></li>
        <li><a href="#tab-3"><span>Inclusions</span></a></li>
    </ul>
    <div id="tab-1">
      <!-- Nested Tabs! -->
      <ul class="grindyMenu">
        <li><a href="#nested-1"><span>Day 1 Iltinerary</span></a></li>
        <li><a href="#nested-2"><span>Day 1 Iltinerary</span></a></li>
        <li><a href="#nested-3"><span>Day 1 Iltinerary</span></a></li>
      </ul>
      <div id="nested-1">
        Nest tab 1 content: Onerem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
      </div>
      <div id="nested-2">
        Nest tab 2 content: Tworem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
      </div>
      <div id="nested-3">
        Nest tab 3 content: Threm ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
      </div>
      <!-- End Nested Tabs -->
      Regular tab 2 content (optional)
    </div>
	 <div id="tab-2">
      <p>First tab is active by default.</p>
      <p>Second tab contains nested tabs.</p>
    </div>
    <div id="tab-3">
        <p>Second tab contains multiple tabs.</p>
    </div>
</div>

..and initialize them both on document ready like so:

<script>
  $(document).ready(function() {
    $("#mytabs").tabs();
    $("#tab-1").tabs();
  });
</script>








</body>
</html>
